<template>
    <div>
        <h1 style="text-align: center; color:chocolate;">新增活动标题</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>活动标题</td>
                    <td>
                        <input type="text" v-model="Huo.Activitytitle" >
                    </td>
                </tr>
                <tr>
                    <td>分类</td>
                    <td>
                        <select v-model="Huo.Sort">
                            <option value="">请选择</option>
                            <option :value="item.SortName" v-for="item in fft" :key="item.Id">{{item.SortName}}</option>
                            
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="Huo.Picture" width="100" height="100" v-if="Huo.Picture!=''">
                    </td>
                </tr>
                <tr>
                    <td>活动日期</td>
                    <td>
                        <input type="datetime-local" v-model="Huo.ActivityTime">
                    </td>
                </tr>
                <tr>
                    <td>活动地点</td>
                    <td>
                        <input type="text" v-model="Huo.Locations">
                    </td>
                </tr>
                <tr>
                    <td>报告截止时间</td>
                    <td>
                        <input type="datetime-local" v-model="Huo.CutTime">
                    </td>
                </tr>
                <tr>
                    <td>活动详情</td>
                    <td>
                        <textarea cols="50" role="5"  v-model="Huo.Details"></textarea>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button class="btn btn-success" @click="add">新增</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import moment from 'moment';
const router=useRouter();
const route=useRoute();


let Huo:any=reactive({
  "Activitytitle": "",
  "Sort": "",
  "Picture": "",
  "ActivityTime": "",
  "Locations": "",
  "CutTime": "",
  "Details": "",
})

let fft:any=ref([])


//声明周期
onMounted(()=>{
    shuju()

})

//活动添加
const add=()=>{
console.log(Huo);
axios({
    url:'/api/Evebts/EventsAdd',
    method:'post',
    data:Huo
}).then(res=>{
    console.log(res);
    if(res.data>0){
        alert('新增成功')
        router.push('/eventsList')
        return;
    }else{
        alert('新增失败')
        return;
    }
    
}).catch(err=>{
    console.log(err);
    
})

}

//获取分类数据
const shuju=()=>{
    console.log(fft);
    
   axios({
    url:'/api/Evebts/ClassifiedsList',
    method:'get',
   }).then(res=>{
    console.log(res);
    fft.value=res.data
    
   }).catch(err=>{
    console.log(err);
    
   })
    
}


//图片上传
const img=(e:any)=>{
    console.log(e);

    var f=e.target.files[0]
    var t=new FormData()
    t.append('file',f)

    axios({
        url:'/api/Imgse/Imgse',
        method:'post',
        data:t
    }).then(res=>{
        console.log(res);
        if(res.data=='图片格式不正确'){
            alert('图片格式不正确');
            return;
        }else if(res.data=='图片大于2M'){
            alert('图片大于2M')
            return;

        }
        Huo.Picture=res.data
        
    }).catch(err=>{
        console.log(err);
        
    })
    
}


</script>

<style scoped>

</style>